<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <%@ include file="/include/service-base-header.jsp" %>
    <title>分销商管理</title>

    <style>
        .card {
            margin-top: 0px;
            margin-bottom: 0px;
        }
    </style>

</head>
<body>
<div class="wrapper">
    <jsp:include page="/include/left_menu.jsp">
        <jsp:param name="index" value="4"/>
    </jsp:include>
    <div class="main-panel">
        <nav class="navbar navbar-expand-lg navigation_shadow_none">
            <div class="container-fluid">
                <div class="navbar-wrapper b-navbar-wapper">
                    <a class="b-navbar-title-active"
                       href="${pageContext.request.contextPath}/s/distribution.do">分销商管理</a>
                    <a class="b-navbar-title" href="${pageContext.request.contextPath}/s/sales-withdraw.do">佣金提现申请</a>
                </div>
                <div class="nav-collapse justify-content-end">
                    <div>
                        <div class="toolbar_left">
                            <div class="form-inline" style="height: 1rem">

                                <div class="form-group form-group-1">
                                    <input type="text" id="name_phone" class="form-control mt-1" placeholder="搜索会员手机号"
                                           style="margin-top: 0.5rem"/>
                                    <button onclick="findSalesList()" type="submit" style="padding-top: 1rem"
                                            class="btn btn-white btn-round btn-just-icon">
                                        <i class="material-icons">search</i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        <div style="background: #EEEEEE;height: 1px"></div>
        <nav class="navbar navbar-expand-lg "
             style="-webkit-box-shadow:0 0 5px rgba(40, 173, 243, 0.0);box-shadow: 0 0 5px rgba(40, 173, 243, 0.0);">
            <div class="container-fluid">
                <div class="navbar-wrapper">
                    <a href="${pageContext.request.contextPath}/s/distribution.do"
                       style="font-size: 0.9rem;margin-left: 0.2rem">分销商管理</a>
                    <span style="font-size: 0.9rem;">&nbsp; / &nbsp;二级分销商详情</span>
                </div>
            </div>
        </nav>
        <div class="container-fluid">
            <div class="row" style="margin-top: 2rem">
                <div class="col-md-5">
                    <div class="card" style="width:100%;">
                        <div class="card-body">
                            <h4 class="card-title">二级分销商信息</h4>
                            <table style="width: 100%;border-collapse:separate; border-spacing:0px 5px;">
                                <tr>
                                    <th id="distribution_name" style=";color: #555;font-weight: normal;width: 35%">姓名：
                                    </th>
                                    <th style="padding-left:  1rem;color: #555;font-weight: normal;width: 40%"
                                        id="distribution_birthday">生日：
                                    </th>
                                    <th style="padding-left:  1rem;color: #555;font-weight: normal;width: 25%;"
                                        id="distribution_sex">性别：
                                    </th>
                                </tr>
                                <tr>
                                    <th id="distribution_region" style=";color: #555;font-weight: normal">地区：</th>
                                    <th style="padding-left:  1rem;color: #555;font-weight: normal"
                                        id="distribution_city">城市：
                                    </th>
                                </tr>
                                <tr>
                                    <th id="distribution_phone" colspan="2" style=";color: #555;font-weight: normal">
                                        电话号码：
                                    </th>
                                </tr>
                                <tr>
                                    <th id="distribution_email" colspan="2" style=";color: #555;font-weight: normal">
                                        邮箱：
                                    </th>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row" style="height: 50%">
                        <div class="col-md-4" style="height: 100%;padding-bottom: 1rem">
                            <div class="card" style="height: 100%">
                                <table style="height: 100%">
                                    <tr>
                                        <th style="padding-top: 0.5rem;padding-left: 1rem;color: #555;font-weight: normal">
                                            总佣金
                                        </th>
                                    </tr>
                                    <tr>
                                        <th style="padding-bottom:0.5rem;padding-left: 1rem;color: #555;font-weight: normal"
                                            id="distribution_general_commission">0KSH
                                        </th>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-4" style="height: 100%;padding-bottom: 1rem">
                            <div class="card" style="height: 100%">
                                <table style="height: 100%">
                                    <tr>
                                        <th style="padding-top: 0.5rem;padding-left: 1rem;color: #555;font-weight: normal">
                                            扩展会员
                                        </th>
                                    </tr>
                                    <tr>
                                        <th style="padding-bottom:0.5rem;padding-left: 1rem;color: #555;font-weight: normal"
                                            id="distribution_extended_membership">0
                                        </th>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-4" style="height: 100%;padding-bottom: 1rem">
                            <div class="card" style="height: 100%">
                                <table style="height: 100%">
                                    <tr>
                                        <th style="padding-top: 0.5rem;padding-left: 1rem;color: #555;font-weight: normal">
                                            待提现佣金
                                        </th>
                                    </tr>
                                    <tr>
                                        <th style="padding-bottom:0.5rem;padding-left: 1rem;color: #555;font-weight: normal"
                                            id="distribution_commission">0KSH
                                        </th>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="row" style="height: 50%;padding-top: 1rem">
                        <div class="col-md-5" style="height: 100%">
                            <div class="card" style="height: 100%">
                                <table onclick="resellerList()" style="height: 100%">
                                    <tr>
                                        <th style="padding-top: 0.5rem;padding-left: 1rem;color: #555;font-weight: normal">
                                            已提现佣金
                                        </th>
                                    </tr>
                                    <tr>
                                        <th style="padding-bottom:0.5rem;padding-left: 1rem;color: #555;font-weight: normal"
                                            id="distribution_two_commission">0KSH
                                        </th>
                                        <th style="padding-left: 1rem;color: #ff3d00;font-weight: normal;font-size: 2px">
                                            提现记录
                                        </th>
                                    </tr>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row" style="margin-top: 3rem">
                <div class="col-md-12">
                    <div class="card card-plain">
                        <div class="card-header card-header-primary">
                            <div class="card-title">会员列表</div>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table" id="table">
                                    <thead class=" text-primary">
                                    <tr>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            #
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            会员名
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            电话号码
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            累计充值金额
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            返佣金额
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            注册时间
                                        </th>
                                        <th style="color: #9c27b0;font-size: 1rem">
                                            操作
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody id="tbody">
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <nav aria-label="page">
                        <ul class="pagination justify-content-center" id="p1">
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

</body>

<script>
    var salesId = baseFn.getQueryString('salesId');
    var data_source;
    var page_count = 15;
    findSalesList();
    function findSalesList() {
        var salesId = baseFn.getQueryString('salesId');
        var data = {};
        var name_phone = $("#name_phone").val();
        data.userPhone = name_phone;
        data.salesId = salesId;
        $.ajax({
            url: baseUrl.base + baseUrl.sales + "/salesUserList",
            type: 'get',
            data: data,
            success: function (data) {
                if (data.code == "0") {
                    var res = data.results;
                    data_source = res;
                    cutPagination(1);
                    // 配置分页
                    $("#p1").pagination({
                        totalData: res.length,
                        showData: page_count,
                        callback: function (idx) {
                            cutPagination(idx);
                        }
                    });
                } else {
                    var res = data.msg;
                    showNotification('bottom', 'right', res);
                }
            }
        });
    };

    /**
     * 分页
     * @param page 从1开始
     */
    function cutPagination(page) {
        var start = (page - 1) * page_count;
        var end = start + page_count;
        if (end > data_source.length) {
            end = data_source.length;
        }
        $("#tbody").empty();

        for (var i = start; i < end; i++) {
            var sales = data_source[i];

            var tr = document.createElement("tr");
            var td = document.createElement("td");
            var tdContent = document.createTextNode(i + 1);
            td.appendChild(tdContent);
            tr.appendChild(td);
            td = document.createElement("td");
            var name = document.createTextNode(sales.userName);

            td.appendChild(name);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(sales.userPhone);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(sales.rechageMoney);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(sales.backMoney);
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            tdContent = document.createTextNode(timestampToTime(sales.createTime));
            td.appendChild(tdContent);
            tr.appendChild(td);

            td = document.createElement("td");
            span = document.createElement("span");
            span.style.color = "#f44336";
            tdContent = document.createTextNode("充值明细");
            span.setAttribute("salesId", sales.salesId);
            span.setAttribute("userId", sales.userId);
            span.onclick = function () {
                datils(this);
            };
            span.appendChild(tdContent);
            td.appendChild(span);
            tr.appendChild(td);


            document.getElementById("tbody").append(tr);
            document.getElementById("tbody").innerHTML;
        }
    }

    findUserInfo();
    function findUserInfo() {
        var data = {};
        data.salesId = salesId;
        $.ajax({
            url: baseUrl.base + baseUrl.sales + "/salesDetails",
            type: 'get',
            data: data,
            success: function (data) {
                if (data.code == "0") {
                    var res = data.results;
                    var sex = res.salesSex == 0 ? "女" : "男";
                    $("#distribution_name").text("姓名：" + res.salesName);
                    $("#distribution_birthday").text("生日：" + timestampToTimeYMD(res.birthDay));
                    $("#distribution_sex").text("性别：" + sex);
                    $("#distribution_region").text("地区：" + res.salesArea);
                    $("#distribution_city").text("城市：" + res.salesCity);
                    $("#distribution_phone").text("电话号码：" + res.salesPhone);
                    $("#distribution_email").text("邮箱：" + res.salesEmail);

                    $("#distribution_general_commission").text(res.backMoney + "KSH");
                    $("#distribution_extended_membership").text(res.userCount);
                    $("#distribution_commission").text(res.salesMoney + "KSH");
                    $("#distribution_two_commission").text(res.outMoney + "KSH");
                } else {
                    var res = data.msg;
                    showNotification('bottom', 'right', res);
                }
            }
        });
    };


    function datils(column) {
        var userId = column.getAttribute("userId");
        $(location).attr('href', '${pageContext.request.contextPath}/s/recharge-list.do?userId=' + userId);
    }

    function resellerList() {
        $(location).attr('href', '${pageContext.request.contextPath}/s/reseller-list.do?salesId=' + salesId);
    }
</script>
</html>